<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
    body {
        color: #666666;
        font-size: 16px !important;
    }
    #container {
        margin: 0 auto !important;

    }
    #text {
        color: #666666;
        font-size: 16px;
        font-weight: 600;
        width: 180px;
        float: left;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 480px;
    }
    #add {
        float: left;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    table {
        width: 600px !important;
        text-align: center;
        margin: 20px auto !important;
        clear: left;
    }
    th {
        text-align: center !important;
    }
    #page {
        width: 420px;
        margin: 0 auto;
    }
</style>
<form action="addCategory" method="post">
    <div id="container">
        <input id="text" class="layui-input" name="name" autocomplete="off">
        <button type="submit" id="add" class="layui-btn">新增</button>
    </div>
</form>
<table class="layui-table">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>操作</th>
        </tr>
    </thead>
    <c:forEach items="${page.list}" var="c" varStatus="st">
        <tr>
            <td>${c.id}</td>
            <td>${c.name}</td>
            <td>
                <a href="editCategory?id=${c.id}" target="_blank"><button class="layui-btn layui-btn-sm">编辑</button></a>
                <button class="layui-btn layui-btn-sm">删除</button>
            </td>
        </tr>
    </c:forEach>
</table>
<div id="page" count="${page.pages}"></div>
<script>
    layui.use('laypage', function() {
        var pages = $("#page").attr("count");
        var total = pages * 5;
        alert(total);
        var laypage = layui.laypage;
        laypage.render({
            elem: 'page',
            limit: 5,
            count: total
        });
    });
</script>